<template>
    <div :abc="av">
       姓名：{{ person.name }}
    </div>
    <div>
        年龄： {{ person.age}}
    </div>
    <div style="margin-top:30px">
        <input :placeholder="usernamePlaceholder" @:blur="handleBlur"/>
        <input :placeholder="emailPlaceholder"/>
        <button @click="submit">提交</button>
    </div>

    <div  style="margin-top:30px">
        <button @click="count++">add : {{count}}</button>
    </div>

    <div  style="margin-top:30px">
         <input v-model="text" @:blur="handleBlur">
    </div>

    <div  style="margin-top:30px">
        <div>Checked names: {{ checkedNames }}</div>

        <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
        <label for="jack">Jack</label>

        <input type="checkbox" id="john" value="John" v-model="checkedNames" />
        <label for="john">John</label>

        <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
        <label for="mike">Mike</label>
    </div>
   
</template>
<script setup>
import {ref,reactive } from 'vue'
import { validateEmail } from './form'
import EmailUtils from './form'

function say() {
    alert(1)
}

// const 数据名 = 数据值
const av = ref("new A")
const count = ref(0)
const text = ref("init value")

const person = reactive({
    name: 'reactive',
    age :10
})

const usernamePlaceholder = ref('这里请输入用户名!')
const emailPlaceholder = ref('请输入邮件地址v')

function handleBlur() {
    // 处理离焦事件
    console.log("input blur");
    console.log("text: ", text.value)
    
}
const submit = ()=> {
    // 处理按钮点击事件业务逻辑
     console.log("按钮被点击了");

     validateEmail("123@qq.com");
     EmailUtils.validateEmail("345@qq.com")
}


const checkedNames = ref(['John'])

setTimeout(()=>{
   
   person.name = "new name"
   text.value = "new value2"
}, 3000)

</script>
